// 页面刷新获取默认地区天气，$(window).ready()简写
$(function () {
    $.ajax({
        url: 'https://tianqiapi.com/api',    // 必填，请求的地址
        type: 'GET',                         // 选填，请求方式，默认是 GET（忽略大小写）
        data: {
            city: '深圳',
            appid: '19814592',
            appsecret: 'OKLSY9ri ',
            version: 'v1'
        },                                   // 选填，发送请求是携带的参数
        dataType: 'json',                    // 选填，期望返回值的数据类型，默认是 string
        success(res) {
                                             // 选填，成功的回调函数
            result(res)                      //封装一个渲染数据的函数
        }
    })
})

// 点击查询获取相应地区的天气，先判断输入是否为空，为空的话弹窗提示
$('#btn').click(function () {
    if ($('#city').val()) {
        $.ajax({
            url: 'https://tianqiapi.com/api',
            type: 'GET',
            data: {
                city: `${$('#city').val()}`,
                appid: '19814592',
                appsecret: 'OKLSY9ri ',
                version: 'v1'
            },
            dataType: 'json',
            success(res) {
                result(res)
            }
        })
        // 查询到后清空输入框
        $('#city').val('')
    } else {
        alert("请输入城市名称!");
    }
})

// 移入未来天气栏，有个放大效果
$('ul>li').hover(function () {
    $(this).addClass('active')
}, function () {
    $(this).removeClass('active')
})



// 封装一个函数，将获取的数据渲染在页面中
function result(res) {
    console.log(res)
    // 渲染周末信息，链式编程
    $('#date-dayname').text(`${res.data[0].week}`)
    // 渲染日期信息
    .next().text(`${res.data[0].date}`)
    // 渲染定位信息
    .next().text(`${res.city}`)
    // 渲染天气图标信息，根据返回的data里的wea内容判断图标，封装一个函数判断显示图标，参数index为获取天气数据的下标，表示第几天
    function weatherIcon(index) {
        switch (res.data[index].wea) {
            case '多云':
                return 'iconfont icon-icon-test';
            case '多云转阴':
                return 'iconfont icon-duoyunzhuanyin';
            case '晴':
                return 'iconfont icon-qingtian1';
            case '阴':
                return 'iconfont icon-yintian';
            case '多云':
                return 'iconfont icon-icon-test';
            case '多云转小雨':
                return 'iconfont icon-icon-test3';
            case '小雨':
                return 'iconfont icon-icon-test3';
            case '小雨转多云':
                return 'iconfont icon-icon-test3';    
            case '中雨':
                return 'iconfont icon-icon-test2';
            case '大雨':
                return 'iconfont icon-icon-test4';
            case '多云转晴':
                return 'iconfont icon-duoyunzhuanqing';
            default:
                return 'iconfont icon-qingtian1';
        }
    }
    // 渲染今天的天气图标数据
    $('#weather-l').removeAttr('class').addClass(weatherIcon(0))
    // 渲染温度信息
    .next().text(`${res.data[0].tem2.slice(0,res.data[0].tem2.indexOf('℃'))}~${res.data[0].tem1}`)
    // 渲染天气状况
    .next().text(`${res.data[0].wea}`)

    // 渲染空气质量
    $('#pm').text(`${res.data[0].air} ${res.data[0].air_level}`)
    if(res.data[0].air_level=='优'){
        $('#pm').css({ background: 'green'})
    }
    else if(res.data[0].air_level=='良'){
        $('#pm').css({ background: 'orange'})
    }else{
        $('#pm').css({ background: 'red'})
    }
    // 渲染湿度
    $('#humidity').text(`${res.data[0].humidity}`)
    // 渲染风速
    $('#wind').text(`${res.data[0].win_meter} ( ${res.data[0].win_speed} )`)

    // 渲染第二天的数据
    // 渲染天气图标数据
    $('#day2>span:eq(0)').removeAttr('class').addClass(weatherIcon(1))
    // 渲染周末信息
    .next().text(`${res.data[1].week}`)
    // 渲染温度信息
    .next().text(`${res.data[1].tem2.slice(0,res.data[1].tem2.indexOf('℃'))}~${res.data[1].tem1}`)

    // 渲染第三天的数据
    $('#day3>span:eq(0)').removeAttr('class').addClass(weatherIcon(2))
    .next().text(`${res.data[2].week}`)
    .next().text(`${res.data[2].tem2.slice(0,res.data[2].tem2.indexOf('℃'))}~${res.data[2].tem1}`)

    // 渲染第四天的数据
    $('#day4>span:eq(0)').removeAttr('class').addClass(weatherIcon(3))
    .next().text(`${res.data[3].week}`)
    .next().text(`${res.data[3].tem2.slice(0,res.data[3].tem2.indexOf('℃'))}~${res.data[3].tem1}`)

    // 渲染第五天的数据
    $('#day5>span:eq(0)').removeAttr('class').addClass(weatherIcon(4))
    .next().text(`${res.data[4].week}`)
    .next().text(`${res.data[4].tem2.slice(0,res.data[4].tem2.indexOf('℃'))}~${res.data[4].tem1}`)
    
}
